<template>
	<view>
		<statusBar></statusBar>
		<view class="header">
			<!-- head left -->
			<view><image @tap="onreturn" src="../../../static/assert/fanhui.png" class="drawer-icon"></image></view>
			<view>
				<text class="symbol-text">{{ symbol }}</text>
			</view>
			<!-- head right -->
			<view><image @tap="gomoney(1)" src="/static/assert/recording.png" class="recording-icon"></image></view>
		</view>
		<view class="page">
			<view class="select-coin-cell">
				<view class="unselect-text">选择币种</view>
				<view v-show="name" class="coin-info">
					<text class="coin-name">{{ name }}</text>
					
				</view>
				<image src="/static/assert/more-icon.png" class="more-icon"></image>
			</view>
			<view>
				<scroll-view scroll-x>
					<view
						v-for="(item, index) in Money"
						:key="index"
						@tap="selectCoin(item.id)"
						class="coin-names"
					>
						{{ item.virtualWalletName }}
					</view>
				</scroll-view>
			</view>
			<view v-show="MoneyItem">
				<view class="coin-addr">
					<img :src="imgUrl" class="imgUrl" alt="" />
					<view>
						<text class="coin-help-text">充币地址</text>
						<image src="/static/assert/help-icon.png" class="coin-help"></image>
					</view>
					<view class="addr-container">{{ addr }}</view>
				</view>
				<button @tap="onCopyResult" class="copy-button">复制地址</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { toast } from '@/utils/toast';
import request from '@/utils/request';
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
export default {
	data() {
		return {
			Money: [],
			MoneyItem: false,
			coinInfo: {},
			symbol: '充币',
			currency: '',
			WalletList:{},
			imgUrl:"",
			addr:"",
			name:""
		};
	},
	
	created() {
		this.MoneyId();
	},
	computed: {
		...mapState('user', ['userinfo'])
	},
	methods: {
		// 返回上一级
		onreturn() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 记录
		gomoney(num) {
			uni.navigateTo({
				url: '../order?typeIndex=' + num 
			});
		},

		selectCoin(num) {
			//快捷选择币种
			this.MoneyItem = true;
			request('/coinTrade/getUserVirtualWalletInfo','POST',{
				token:this.userinfo.token,
				virtualWalletId :num
			}).then( res =>{
				if(res.data.code == 200){
					this.WalletList = { ...res.data.data }
					this.imgUrl = res.data.data.userVirtualWallet.virtualWalletAddresQrCodeUrl
					this.addr = res.data.data.userVirtualWallet.virtualWalletAddres
					this.name = res.data.data.virtualWallet.virtualWalletName
					console.log(this.name,787878)
				}
				try {
					this.WalletList = JSON.parse(res.data).data;
					this.imgUrl = JSON.parse(res.data).data.userVirtualWallet.virtualWalletAddresQrCodeUrl
					this.addr = JSON.parse(res.data).data.userVirtualWallet.virtualWalletAddres
					this.name = JSON.parse(res.data).data.virtualWallet.virtualWalletName
				} catch (e) {
					//TODO handle the exception
					this.Money = res.data.data;
					this.imgUrl = res.data.data.userVirtualWallet.virtualWalletAddresQrCodeUrl
					this.addr = res.data.data.userVirtualWallet.virtualWalletAddres
					this.name = res.data.data.virtualWallet.virtualWalletName
				}
			})
		},
		// 点击复制
		onCopyResult() {
			// #ifdef APP-PLUS
			let _self = this;
			uni.setClipboardData({
				data: _self.addr,
				success: function() {
					console.log('success');
					toast('复制成功');
				}
			});
			// #endif

			// #ifndef APP-PLUS
			toast('当前功能不支持H5环境,请在手机上运行');
			// #endif
		},

		// 接口
		MoneyId() {
			request('/coinTrade/listVirtualWallet', 'POST', {}).then(res => {
				if (res.data.code == 200) {
					this.Money = res.data.data;
				}
				try {
					this.Money = JSON.parse(res.data).data;
				} catch (e) {
					this.Money = res.data.data;
					//TODO handle the exception
				}
			});
		}
		
		// 点击后展示二维码
		
	},
	
};
</script>

<style lang="scss" scoped>
.header > view {
	display: flex;
	align-items: center;
}

.header {
	display: flex;
	height: 90upx;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 30upx;
	box-sizing: border-box;
	// margin-top: 30upx;
	box-shadow: rgba(53, 48, 15, 0.07) 0px 3px 8px 0px;

	.drawer-icon {
		width: 16upx;
		height: 30upx;
	}

	.symbol-text {
		text-align: center;
		font-size: 36upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(45, 47, 86, 1);
	}

	.more-icon {
		width: 33upx;
		height: 32upx;
	}
}
.recording-icon {
	width: 43upx;
	height: 40upx;
	vertical-align: middle;
}

.more-icon {
	width: 19upx;
	height: 34upx;
}

.select-coin-cell {
	padding: 0 30upx;
	display: flex;
	justify-content: space-between;
	height: 40upx;
	margin-top: 32upx;
	align-items: center;
	position: relative;
	padding-bottom: 13upx;
	border-bottom: 1upx solid #f0f0f0;
	.unselect-text {
		font-size: 26px;
		font-family: PingFang-SC-Regular;
		font-weight: 400;
		color: rgba(186, 197, 203, 1);
	}
}
.imgUrl {
	width: 60%;
}
.select-coin-cell::after {
	content: ' ';
	position: absolute;
	bottom: 0;
	left: 30upx;
	height: 2px;
	width: calc(100% - 60upx);
	background-color: #f0f0f0;
}

.coin-names {
	width: 16%;
	height: 100%;
	font-size: 26upx;
	font-family: PingFang-SC-Medium;
	font-weight: 500;
	color: rgba(104, 129, 255, 1);
	margin-top: 25upx;
	display: inline-block;
	text-align: center;
}

.coin-name {
	font-size: 26upx;
	font-family: PingFang-SC-Medium;
	font-weight: 500;
	color: rgba(45, 47, 86, 1);
}

.coin-fullname {
	font-size: 26upx;
	font-family: PingFang-SC-Medium;
	font-weight: 500;
	color: rgba(186, 197, 203, 1);
	margin-left: 28upx;
}

.coin-info {
	margin-left: -300upx;
}

.coin-addr {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 80upx;

	.coin-help {
		width: 24upx;
		height: 24upx;
		margin-left: 11upx;
		vertical-align: middle;
	}

	.coin-help-text {
		display: inline-block;
		margin-top: 79upx;
		font-size: 24upx;
		line-height: 24upx;
		font-family: PingFang-SC-Regular;
		font-weight: 400;
		color: rgba(45, 47, 86, 1);
	}

	.addr-container {
		margin: 0 30upx;
		width: calc(100% - 60upx);
		text-align: center;
		background: rgba(247, 247, 251, 1);
		border-radius: 10upx;
		font-size: 24upx;
		font-family: PingFang-SC-Regular;
		font-weight: 400;
		color: rgba(45, 47, 86, 1);
		margin-top: 12upx;
	}
}

.copy-button {
	margin-top: 52upx;
	width: 260upx;
	height: 80upx;
	line-height: 80upx;
	background: linear-gradient(-90deg, rgba(104, 129, 255, 1), rgba(115, 156, 255, 1));
	border-radius: 10upx;
	font-size: 32upx;
	font-family: PingFang-SC-Regular;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
}
</style>
